import { Component } from 'react';
import './Heats.less';
let Calendar = require('uxcore-calendar');
import Heatmap from 'components/heatmap';

export default class Heats extends Component {

    constructor(props) {
        super(props);
        let t = this,
            p = t.props;
        t.state = {
            city: p.city || "杭州市",
            time: p.time,
            playing: false,
            animate: false,
            name: p.name
        }
        this.handlerChange = this.handlerChange.bind(this);
        this.handlerPlaying = this.handlerPlaying.bind(this);
        this.handlerAnimate = this.handlerAnimate.bind(this);
    }
    handlerChange(hour) {
        this.setState({ hour })
    }
    handlerPlaying() {
        let t = this,
            state = t.state,
            playing = state.playing;
        t.setState({ playing: !playing, action: 'playing' })
    }
    handlerAnimate() {
        let t = this,
            state = t.state,
            animate = state.animate;
        t.setState({ action: 'cancel' })
    }
    onSelect(date) {
        console.log(date)
        let year = date.getFullYear(),
            month = date.getMonth() + 1,
            day = date.getDay(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds(),
            time = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
        this.setState({ time: date })
    }

    render() {
        let me = this;
        const { state: { city, time, playing, animate, name, action }, handlerChange, handlerPlaying, handlerAnimate } = me;
        return (
            <div className="heats">
                <div className="timechooser">
                    <Calendar hasTrigger={true} showTime={true} format="yyyy-MM-dd HH:00:00" value={time} onSelect={me.onSelect.bind(me)} />
                    <span className={"playing " + (playing ? 'on' : 'off')} ref="playing" onClick={handlerPlaying}></span>
                    <span className="animate" onClick={handlerAnimate}></span>
                </div>
                <Heatmap city={city} name={name} time={time} action={action} playing={playing} />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        let t = this,
            { state: { city } } = t;
        if (nextProps.city != city) t.setState({ city: nextProps.city });
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

